<template>
  <div id="logina">
    <div class="loginselect">
      <el-tabs v-model="activeName" @tab-click="handleClick">
       <el-tab-pane label="手机密码" name="first"></el-tab-pane>
        <el-tab-pane label="手机验证码" name="second"></el-tab-pane>
        <el-tab-pane label="二维码" name="third"></el-tab-pane>
      </el-tabs>
    </div>

    <div class="logininput" v-if="activeName == 'first' ">
        <input type="text" placeholder="手机号码" ref="loginuser"> 
        <input type="password" placeholder="密码" ref="loginpassword"> 
        <button class="loginbtn" @click="getloginapi()">登录</button>

      <!-- <input type="text" placeholder="手机号码" ref="loginuser">
      <input type="password" placeholder="密码" ref="loginpassword">
      <button class="loginbtn" @click="getloginapi()">登录</button> -->
      
    </div>

    <div class="logininput" v-if="activeName == 'second' ">
      <input type="text" placeholder="手机号码">
      <div>
        <input style="width:120px" type="textcode" placeholder="验证码"> <button style="width:80px">验证码</button>
      </div>
      <button class="loginbtn">登录</button>
    </div>

    <div class="logininput" v-if="activeName == 'third' ">
      <div class="qrcode" ref="qrCodeUrl"></div>
    </div>

  </div>

</template>

<script>
import QRCode from 'qrcodejs2'
import { addAbortSignal } from 'stream'
import {getlogin} from '../network/profile'
import {getqrkey, getcreateqr, getqrcheck} from '../network/profile'

export default {
  name:'#Login',
  data() {
    return {
      activeName:'first',
      qrstate:null
    }
  },
  methods: {

    //账号密码登录
    async getloginapi() {
      console.log(this.$refs.loginuser.value.trim());
      await getlogin(this.$refs.loginuser.value.trim(),this.$refs.loginpassword.value.trim()).then(res => {
        console.log(res.data.token);
        switch (res.data.code) {
          case 200:
            this.$message("登录成功");
            //存储token
            localStorage.token = res.data.token
            //获取用户头像姓名
            this.$store.dispatch('getuserinfoapi').then(res => {
              this.$store.dispatch("getplaylist");                //获取+存储----用户歌单
              this.$store.dispatch("getlikelistid")               //获取+存储 -----用户喜欢的音乐ID
            })
            //修改登录状态为1
            this.$store.commit("UserState",1)
            //转跳推荐页面
            this.$router.push('/recommend')
            break;
          case 502:
            this.$message.error(res.data.message);
            break;
          default:
            this.$message.error("错误" + res.data.code);
            break;
        }
      })
    },

    /**
     * 二维码登录
     */
    async createQrCode() {
      const a = new Date()
      const qrkey = await getqrkey(a.getTime()).then(res => {
        console.log(res.data.data.unikey);
        return res.data.data.unikey
        //console.log(res.data.data.unikey);
      })
      const loginurl = await getcreateqr(qrkey,a.getTime()).then(res => {
        console.log(res.data.data.qrurl);
        return res.data.data.qrurl
      })

      /* getcreateqr(res.data.data.unikey,a.getTime()).then(res => {
          console.log(res.data.data.qrurl);
          return res.data.data.qrurl */
      /* const loimg = await getcreateqr(qrkey,a.getTime()).then(res => {
        console.log(res);
      }) */
      let logining = setInterval(() => {
        const a = new Date()
         getqrcheck(qrkey,a.getTime()).then(res => {
          console.log(res.data);
          //b = res.data.code
          if (res.data.code == 803) {
            clearInterval(logining)
            this.$store.dispatch("getuserinfoapi").then(res => {
              this.$store.commit("UserState",1)
            })
            this.$router.push('/recommend')
          }
        })
      }, 2000);

      //二维码生成
      let qrcode  = new QRCode(this.$refs.qrCodeUrl,{
        text: loginurl,
        width: 130,
        height:130,
        colorDark: 'black',
        colorLight: 'white',
        correctLevel: QRCode.CorrectLevel.H
      })
    },


  },
  watch: {
    //监听二维码按钮
    'activeName': {
      handler(val) {
        if (val == 'third') {
          this.$nextTick(function () {
            this.createQrCode()
          })
        }
      }
    }
  }
}
</script>

<style>

.loginselect1 {

}
.loginselect {
  width: 62vw;
  height: 50px;
  text-align: center;
  display: flex;
  justify-content:center;
  margin: 50px 0 0 0;

}
.logininput {
  width: 62vw;
  height: 200px;
  display: flex;
  flex-direction:column;
  justify-content:center;
  align-items:center
}
.inputlogin {
  width: 500px;
  height: 200px;
  display: flex;
  flex-direction:column;
  justify-content: center;
}

input[type=text], input[type=password], input[type=textcode]{
  width: 200px;
  height: 25px;
  box-sizing: border-box;
  border: 3px solid #ccc;
  outline: none;
  border-radius: 5px;
  margin: 1rem 0 0 0;
}
input[type=text]:focus, input[type=password]:focus{
  border: 3px solid #ccc;
}
.loginbtn {
  width: 50px;
  margin: 1.5rem 0 0 0;
}
</style>